import React, { FC, useEffect } from 'react';
import { Donut } from '@ant-design/charts';
import useHoxModel from '../../../../useHoxModel';
import EmptyCenter from '@/components/EmptyCenter';
import { Spin } from 'antd';
import styles from './index.less';

interface Props {
  height: number;
}
const DemoDonut: FC<Props> = ({ height }) => {
  const { getRunAlarmPie, runAlarmPie = [], runAlarmPieLoading } = useHoxModel((model) => [
    model.runAlarmPieLoading,
    model.runAlarmPie,
  ]);

  useEffect(() => {
    getRunAlarmPie();
  }, []);
  const config = {
    forceFit: true,
    title: {
      visible: true,
      text: '告警类型',
      style: {
        fontSize: 14,
        fill: '#545b6d',
        fontWeight: 500,
      },
    },
    color: ['#5fbbea', '#6992d4', '#38d8e8', '#766fb5'],
    radius: 0.8,
    innerRadius: 0.85,
    padding: [40, 90, 45, 40],
    data: runAlarmPie,
    label: {
      visible: true,
      type: 'spider',
    },
    angleField: 'value',
    colorField: 'alarmLevel',
    statistic: {
      visible: true,
      htmlContent: (item: { name: string; value: string }) => {
        return `<div style="text-align:center;">
            <div>${item.value}</div>
            <div>${item.name}</div>
          </div>`;
      },
    },
    style: {
      height: height - 16 + 'px',
    },
  };
  return (
    <div className={styles['pie-wrap']}>
      <Spin spinning={runAlarmPieLoading}>
        {runAlarmPie && runAlarmPie[0] ? <Donut {...config} /> : <EmptyCenter />}
      </Spin>
    </div>
  );
};
export default DemoDonut;
